<template>
  <div id="personal">
    <headbar></headbar>
    <div class="narrow-content">
      <div class="user-header clearfix">
        <div class="profilepic">
          <a><img src="../../assets/user.jpg"/></a>
        </div>
        <div class="user-info">
          <h3 class="user-name">随心前行的唐子清</h3>
          <ul class="user-info-list">
            <a href="articlelist.html">文章&nbsp
              <nobr>3</nobr>
            </a>
            <span>字数&nbsp<nobr>4.8K</nobr></span>
            <a href="favorite.html">喜欢&nbsp
              <nobr>3</nobr>
            </a>
          </ul>
        </div>
        <a href="edit.html" class="btn manage-btn">新建文章</a>
      </div>
      <nav class="user-nav">
        <a href="personal.html" class="on">我的文章</a>
        <a href="dynamic.html">最新动态</a>
        <a href="favorite.html">喜欢的文章</a>
      </nav>

      <section class="user-article-wrapper">
        <div class="myarticle-list  clearfix">
          <div class="article-title">
            <span>原创</span>
            <a href="details.html" target="_blank">你那么年轻，又何必急于求成</a>
          </div>
          <div class="article-text">
            <p>前两天接到了公司一位刚来不久的员工递交的辞职信，与之前我收到过的辞职信相比，我反倒觉得这封辞职信写得干脆利落，可就是有些不切实际。
              辞职的原因很简单，此员工即将二十岁，还依旧一无所成，拿着不尽人意的薪水。他特别想改变现状，争取在二十一岁的时候能拥有自己的事业，所以经过再三思量后选择了辞职，然后去做自己爱做的事。
              当我看完这封辞职信以后，心里竟然有些难受，因为在他的信里我看到了自己当年刚跨出校门的影子。那时的自己不就是这样么，一心想着急于求成，想着做出一番属于自己事业，因为看不起微薄的薪水所以自己与朋友选择合伙创业，可终究因为经验的欠缺而血本无归。后来因为不服输的精神再次做起了小买卖，终究还是因为经验的欠缺导致结果然并卵。﻿﻿</p>
          </div>
          <div class="article-meta-left">
            <a target="_blank" href="details.html">
              <i class="glyphicon glyphicon-eye-open"></i> 42
            </a>
            <a><i class="glyphicon glyphicon-heart"></i> 2</a>
            <a target="_blank" href="details.html#comments">
              <i class="glyphicon glyphicon-comment"></i> 1
            </a>
          </div>
          <div class="article-meta-right">
            <p>12小时前</p>
          </div>
          <div class="operation">
            <a href="#" class="edit">编辑</a>
            <a href="#" class="delete" data-toggle="modal" data-target="#deleteModal">删除</a>
          </div>

        </div>

        <div class="myarticle-list clearfix">
          <div class="article-title">
            <span>原创</span>
            <a href="details.html" target="_blank">你要做一个不动声色的大人了</a>
          </div>
          <div class="article-text clearfix">
            <p class="col-xs-12 col-sm-8">
              高中时代第一次看日剧《一公升的眼泪》，每次看到亚也没有一点情绪的自问：“病魔为什么选择了我”时，我都会站起身来，转身躲在一个没人看见的角落，哭很久很久。
              擦干眼泪，平复情绪，我才敢继续观看后面的剧情。
              好在后来，她终于找到了让自己心情变得开朗的办法。就在大家以为，她终于懂得了自救，终于可以拥有幸福的生活的时候，可是剧情来一个大反转。那些之前让她变得开心的事情，剩下的都变成独自面对黑暗声嘶力竭的呼喊声。
              到了后面的日子，她日渐的平和，终于在某一天安然离世。
              可是，即便是如此安然，她在看着远处的时候，眼角却总有莫名的泪水流出。</p>
            <figure class="article-cover col-xs-12 col-sm-4"><img src="../../assets/user.jpg"/></figure>
          </div>
          <div class="article-meta-left">
            <a target="_blank" href="details.html">
              <i class="glyphicon glyphicon-eye-open"></i> 42
            </a>
            <a><i class="glyphicon glyphicon-heart"></i> 2</a>
            <a target="_blank" href="details.html#comments">
              <i class="glyphicon glyphicon-comment"></i> 1
            </a>
          </div>
          <div class="article-meta-right">
            <p>12小时前</p>
          </div>
          <div class="operation">
            <a href="#" class="edit">编辑</a>
            <a href="#" class="delete" data-toggle="modal" data-target="#deleteModal">删除</a>
          </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                  aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">确认</h4>
              </div>
              <div class="modal-body">
                <p>你确定要删除这篇文章吗？</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">删除</button>
              </div>
            </div>
          </div>
        </div>

      </section>
    </div>
    <footbar></footbar>
  </div>
</template>

<script>
  import headbar from '../../components/header.vue'
  import footbar from '../../components/footer.vue'

  export default {
    name: 'personal',
    components: {
      headbar, footbar,
    }
  }
</script>

<style scoped>
  /*公共头部，可考虑组件化*/
  .user-header {
    width: 100%;
    height: auto;
    padding: 40px 20px;
  }

  .profilepic {
    width: 100px;
    height: 100px;
    line-height: 100px;
    float: left;
  }

  .profilepic img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .user-info {
    float: left;
    margin-left: 20px;
  }

  .user-name {
    margin: 0;
    line-height: 60px;
  }

  .user-info-list {
    line-height: 20px;
  }

  .user-info-list a, .user-info-list span {
    color: #777;
    margin-right: 20px;
    font-size: 16px;
  }

  .user-info-list nobr {
    color: #000;
  }

  .manage-btn {
    float: right;
    padding: 6px 16px;
    background: #387aff;
    color: #fff;
    margin: 33px 0;
  }

  .user-nav {
    width: 100%;
    height: 80px;
    background: #fff;
    margin: 20px 0;
  }

  .user-nav a {
    display: inline-block;
    margin: 0 40px;
    line-height: 77px;
    font-size: 16px;
  }
  .user-nav a:hover {
      color: #387aff;
    }
  .user-nav .on {
    color: #387aff;
    border-bottom: 3px solid #387aff;
  }

  /*公共部分结束*/
  .article-title {
    padding: 4px 0;
  }

  .article-title span {
    display: inline-block;
    vertical-align: text-bottom;
    background: #febb50;
    color: #fff;
    padding: 2px 4px;
    margin-right: 8px;
    border-radius: 4px;
  }

  .article-title a {
    font-family: sc-bold,"Microsoft YaHei";
    font-size: 24px;
    color: #666;
  }

  .article-text p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    color: #777;
    line-height: 24px;
    padding-left: 0;
    margin-bottom: 30px;
  }

  .article-cover img {
    width: 100%;
    height: 140px;
  }

  .article-meta {
    padding-right: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    margin-top: 20px;
  }

  .article-meta a {
    color: #777;
    margin-right: 14px;
    display: inline-block;
  }

  .article-meta i {
    top: 2px;
    margin-right: 4px;
  }

  .article-meta a, .article-meta a:hover {
    transition: .1s ease-in;
    -webkit-transition: .1s ease-in;
    -moz-transition: .1s ease-in;
    -o-transition: .1s ease-in;
    -ms-transition: .1s ease-in;
  }

  .have-img {
    min-height: 140px;
  }

  .have-img .wrap-img {
    position: absolute;
    top: 50%;
    margin-top: -40px;
    right: 19px;
    width: 30%;
    height: 140px;
  }

  .have-img .wrap-img img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
  }

  .have-img > div {
    padding-right: 34%;
  }

  .narrow-content {
    margin: 40px auto;
    max-width: 960px;
    padding: 0 24px;
    position: relative;
  }

  .article-meta-left {
    padding-right: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    float: left;
  }

  .article-meta-left a {
    color: #777;
    margin-right: 14px;
    display: inline-block;
  }

  .article-meta-left i {
    top: 2px;
    margin-right: 4px;
  }

  .article-meta-left a, .article-meta-left a:hover {
    transition: .1s ease-in;
    -webkit-transition: .1s ease-in;
    -moz-transition: .1s ease-in;
  }

  .article-meta-right {
    float: right;
    color: #777;
    opacity: 1;
  }

  .article-meta-right p {
    margin: 0 10px 0 0;
  }

  .myarticle-list {
    width: 100%;
    padding: 30px;
    margin-top: 20px;
    background: #fff;
    position: relative;
  }

  .myarticle-list:hover .article-meta-right {
    opacity: 0;
  }

  .myarticle-list:hover .operation {
    display: block;
  }

  .myarticle-list .author {
    margin-bottom: 14px;
  }

  .myarticle-list .author-avatar {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px 0 0;
    width: 44px;
    height: 44px;
    cursor: pointer;
  }

  .myarticle-list .author-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .operation {
    position: absolute;
    right: 40px;
    bottom: 30px;
    display: none;
  }

  .operation a {
    display: inline-block;
    width: 50px;
    text-align: right;
  }

  .edit {
    color: #387aff;
    cursor: pointer;
  }

  .delete {
    color: #ff0000;
    cursor: pointer;
    outline: none;
  }

  .comment-list .author-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .comment-reply a {
    display: inline-block;
    width: 50px;
    line-height: 20px;
    font-size: 16px;
  }

  @media screen and (max-width: 768px) {
    .user-header {
      padding: 0;
    }

    .profilepic {
      width: 60px;
      height: 60px;
      line-height: 60px;
    }

    .user-name {
      line-height: 40px;
    }

    .manage-btn {
      display: none;
    }

    .user-nav {
      height: 60px;
    }

    .user-nav a {
      margin: 0 10px;
      line-height: 57px;
    }

    .article-text p {
      padding-right: 0;
      margin-bottom: 20px;
    }

    .article-cover {
      margin-bottom: 20px;
    }

    .comment-phone-reply a {
      display: inline-block;
      width: 50px;
      line-height: 20px;
      font-size: 16px;
    }

    .edit {
      opacity: 0;
    }
  }
</style>
